<template>

  <a-button
    style="margin: 4px"
    @click="openModal"
    v-if="data.nameCn && props.type==='button'"
    size="small"
    :type="pmpHooks.hhList.value.includes(data.id) ? 'primary' : 'dashed'"
  >
    <SettingFilled
      :style="{ color: 'red' }"
      v-if="
        data.classify == Constants.itemClassify.PROCESS &&
        data.toolIdList.includes(pmpHooks.currentIO.value)
      "
    ></SettingFilled>
    <LoginOutlined
      :style="{ color: 'red' }"
      v-if="
        data.classify == Constants.itemClassify.PROCESS &&
        data.inputIdList.includes(pmpHooks.currentIO.value)
      "
    ></LoginOutlined>

      <a-tooltip placement="right" v-if="data.classify == Constants.itemClassify.PROCESS">
        <template #title>
          定义：{{data.define}}
          <div style="border-bottom:1px solid #ccc;border-top:1px solid #fff;margin:8px 0px;"/>
          作用：{{data.usage}}
        </template>
        {{ data[props.attr] }}
      </a-tooltip>

      <span v-else> {{ data[props.attr] }} </span>


        


    <LogoutOutlined
      :style="{ color: 'red' }"
      v-if="
        data.classify == Constants.itemClassify.PROCESS &&
        data.outputIdList.includes(pmpHooks.currentIO.value)
      "
    ></LogoutOutlined>
  </a-button>


    <a-tag color="#108ee9" v-if="data.nameCn && props.type==='text'"  style="cursor:pointer" @click="openModal">{{ title }}</a-tag>


  <a-modal
    :width="'100%'"
    style="height: 100%; top: 8px"
    v-model:open="open"
    :title="title"
    @ok="closeModal"
  >
    <BasicInfo :data="data" v-if="data.id"></BasicInfo>
  </a-modal>
</template>
<script setup>
import pmpHooks from '@/hooks/PmpHooks.js'
import { ref, onMounted, watch } from 'vue'
import BasicInfo from '@/components/BasicInfo.vue'
import { messageApi } from '@/utils/MessageUtils'
import Constants from '@/constants/Constants.js'
import {
  ArrowRightOutlined,
  ArrowLeftOutlined,
  SettingFilled,
  LoginOutlined,
  LogoutOutlined,
} from '@ant-design/icons-vue'
const props = defineProps({
  id: {
    type: String,
    default: () => {},
  },
  attr: {
    type: String,
    default: 'nameCn',
  },
  type:{
    type:String,
    default:'button' // 类型有button(按钮),text(文本)
  }
})

const data = ref({})
const title = ref('')

onMounted(() => {
  // data.value = pmpHooks.pmpDict.value[props.id]
  data.value = pmpHooks.loadPmpDictDetail(props.id)
  title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
})

watch(
  () => props.id,
  (v) => {
    data.value = pmpHooks.loadPmpDictDetail(v)
    title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
)

// watch(props.id, (newValue, oldValue) => {
//     console.log("watch",newValue,oldValue)
//     data.value = pmpHooks.pmpDict.value[props.id]
// })

const open = ref(false)
function closeModal() {
  open.value = false
}

function openModal() {
  // console.log('=====', props.id)

  // console.log('=====', data.value)
  open.value = true
}
</script>
<style scoped></style>
